
<template>
  <div class="topSongsRoot" v-show="singerInfo&&singerInfo.briefDesc">
    <list-info :singerInfo='singerInfo' />
    <el-tabs v-model="activeName" @tab-click="handleTab">
      <el-tab-pane label="专辑" name="first">
        <songs-table :singerAlbum='singerAlbum' :topSongs="topSongs" :paramsId='paramsId' />
      </el-tab-pane>
      <el-tab-pane label="MV" name="second">
        <singer-mv-card :videoList='mvList' @itemCardClick='itemCardClick' />
      </el-tab-pane>
      <el-tab-pane label="歌手详情" name="third">
        <div class="singerDesc">{{singerInfo.briefDesc}}</div>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import { reqSingerInfo, reqAlbumInfo, reqSingerTopSongs, reqAlbumDetail, reqSingerMv } from '@/network/api'
import { handleMusicTime, handleNum } from '@/plugins/utils'
import ListInfo from './ListInfo.vue'
import SongsTable from './SongsTable.vue'
import SingerMvCard from '@/components/videoListCard/SingerMvCard.vue'
import { reactive, onMounted, toRefs, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
  name: 'singerDetail',
  components: { SongsTable, ListInfo, SingerMvCard },
  setup() {
    const data = reactive({
      activeName: 'first',
      paramsId: '',
      singerInfo: {},
      topSongs: [],
      albumPage: 1,
      isAlbumMore: false,
      isCheckAllShow: true,
      mvList: [],
      videoPage: 1,
      singerAlbum: []
    })
    const store = useStore()
    const state = store.state
    const route = useRoute()
    const router = useRouter()
    const msg = inject('$message')
    const handleTab = e => {
      if (e.index == 1 && data.mvList.length === 0) {
        getSingerMv()
      }
    }
    const getSingerInfo = async () => {
      const res = await reqSingerInfo(data.paramsId)
      data.singerInfo = res.data.artist
    }
    const getSingerTopSongs = async () => {
      const res = await reqSingerTopSongs(data.paramsId)
      data.topSongs = res.songs.map(v => {
        v.dt = handleMusicTime(v.dt)
        return v
      })
    }
    const getAlbumInfo = async () => {
      let res = await reqAlbumInfo({
        id: data.paramsId,
        limit: 10,
        offset: (data.albumPage - 1) * 10
      })
      res = res.hotAlbums
      res.forEach(v => {
        getAlbumDetail(v.id)
      })
    }
    const getAlbumDetail = async id => {
      let res = await reqAlbumDetail(id)
      res.songs = res.songs.map(v => {
        v.dt = handleMusicTime(v.dt)
        return v
      })

      data.singerAlbum.push(res)
    }
    const getSingerMv = async () => {
      const res = await reqSingerMv({
        id: data.paramsId,
        limit: 20 * data.videoPage
      })
      data.mvList = res.mvs.map(v => {
        v.duration = handleMusicTime(v.duration)
        v.playCount = handleNum(v.playCount)
        return v
      })
    }
    const itemCardClick = (id, i, type) => {
      if (state.isLogin === false) {
        msg.error('登陆后才能观看MV')
        // return
      }
      router.push(`/videodetail/${id}/mv`)
    }

    onMounted(() => {
      data.paramsId = route.params.id
      getSingerInfo()
      getSingerTopSongs()
      getAlbumInfo()
    })
    return {
      ...toRefs(data),
      itemCardClick,
      handleTab
    }
  }
}
</script>

<style scoped>
.topSongsRoot {
  height: 100%;
  overflow-y: scroll;
}

.red {
  color: red;
}
.el-tabs {
  margin-top: 10px;
}
.singerDesc {
  font-size: 12px;
  color: #373733;
  letter-spacing: 0.5px;
  text-indent: 2em;
}
</style>